<template>
  <Dialoger v-model="isShow" :onConfirm="handleSubmit" :dialogCls="'d-paner-md'" title="编辑">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">当前环境</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.code" class="d-form-select">
              <option value="">无</option>
              <option v-for="item in envirmentList" :key="item.id" :value="item.id">{{ item.code }}</option>
            </select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">缓存</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.key" class="d-form-select">
              <option value="">不缓存</option>
              <option v-for="item in cacheList" :key="item.value" :value="item.value">{{ item.label }}</option>
            </select>
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, Switcher } from '@daelui/vdog/dist/components'
import { zh as locale } from '@daelui/dogjs/dist/locale'
import { parser } from '@daelui/dogjs/dist/components'
import dictionarySer from '../../service/action/dictionary.action'
import naveBus from './business/nave'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    Switcher
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式
      // 编辑信息
      editInfo: {},
      // 表单数据
      state: {
        id: '',
        cat: '',
        code: '',
        key: '',
        value: '',
        order: 1
      },
      // 环境列表
      envirmentList: [],
      // 缓存列表
      cacheList: [
        {value: 'sessionStorage', label: '会话缓存'},
        {value: 'localStorage', label: '持久缓存'}
      ]
    }
  },

  methods: {
    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = true
      dictionarySer.queryItem({
        cat: 'nave-env-setting'
      }).then(res => {
        if (res.data && res.data.id) {
          this.isEdit = true
          this.state = res.data
        } else {
          this.isEdit = false
          this.state = {
            cat: 'nave-env-setting',
            code: '',
            key: '',
            value: '',
            order: 1,
            updateTime: '',
            updateUser: '',
            createTime: '',
            createUser: ''
          }
        }
      })
    },

    /**
     * @function 提交
    */
    handleSubmit (b) {
      let defer = null
      let data = Object.assign({}, this.state)
      data.layout = parser.stringify(data.layout)
      // 编辑
      if (this.isEdit) {
        defer = dictionarySer.editItem(data)
      } else { // 添加
        defer = dictionarySer.addItem(data)
      }
      // 缓存数据
      if (data.key) {
        naveBus.setEnvirmentCache(data)
      } else {
        naveBus.removeEnvirmentCache()
      }
      return defer.then(result => {
        let b = true
        if (result.success) {
          Dialoger.success(locale.action.success)
          this.$emit('onSubmitSuccess', data)
        } else {
          b = false
          Dialoger.danger(locale.action.fail)
        }
        return b
      })
    }
  },

  mounted () {
    // 查询环境列表
    dictionarySer.queryTreeEnv().then(list => {
      list = list.filter(item => {
        return !!item.volume
      })
      this.envirmentList = list
    })
  }
}
</script>

<style lang="less" scoped>
.d-row {
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
.d-form-textarea {
  min-height: 320px;
}
</style>
